@charset "utf-8";
/* CSS Document */

* {margin: 0; padding: 0; box-sizing: border-box; -webkit-overflow-scrolling: touch;}

html {font-size: calc(100vw/7.5);}
body {overflow-x: hidden; color: #333; background-image: url("../images/bg.jpg"); background-size: 100%;}
img,button {display: block;}

.pop-bg-share {position: fixed; background-color: rgba(16,24,65,.8); top: 0; left: 0; right: 0; bottom: 0; justify-content: center; align-items: center; z-index: 9999; display: none;}
.pop-bg {position: fixed; background-color: rgba(16,24,65,.8); top: 0; left: 0; right: 0; bottom: 0; justify-content: center; align-items: center; z-index: 999; display: none;}
.pop-bg.show {display: -webkit-flex; display: flex;}
.pop-bg .pop-box {position: relative; width: 5.36rem; min-height: 3rem; background-color: #fff; border-radius: .2rem; display: none;}
.pop-bg .pop-box.card {width: 5.36rem; height: 8.03rem; background-image: url("../images/pop_card_bg.jpg"); background-size: 100%; background-repeat: no-repeat; box-shadow: 0 .1rem .18rem rgba(43,12,9,.5);}
.pop-bg .pop-box.redbag {width: 100%; height: 6.83rem; background-image: url("../images/pop_redbag_bg.png"); background-size: 100%; background-repeat: no-repeat; background-color: transparent; padding-top: 1.6rem;}
.pop-bg .pop-box#failed {padding-top: 1.5rem;}
.pop-bg .pop-box#failed1 {padding-top: 2rem;}
.pop-bg .pop-box .pop-redbag-text {margin-top: .24rem;}
.pop-bg .pop-box .pop-redbag-btn {margin-top: .8rem;}
.pop-bg .pop-box .pop-success-box {color: #c51321; font-size: .74rem; width: 1rem; line-height: .84rem; text-align: center; position: absolute; left: 50%; margin-left: -.5rem; font-weight: bolder; top: 1.72rem;}
.pop-bg .pop-box .pop-failed-box {width: 100%; text-align: center; font-size: .45rem; color: #c51321; font-weight: bolder;}
.pop-bg .pop-box .failed-icon {width: 2rem; margin: .4rem auto;}
.pop-bg .pop-box .pop-card-success-text {position: absolute; min-width: 2.95rem; height: .56rem; padding: 0 .1rem; line-height: .56rem; border-radius: .6rem; background-color: #07367d; color: #fff; text-align: center; font-size: .24rem; left: 50%; margin-left: -1.47rem; top: 5.28rem;}
.pop-bg .pop-box .pop-card-failed-text {width: 4.5rem; height: .56rem; line-height: .56rem; border-radius: .6rem; background-color: #07367d; color: #fff; text-align: center; font-size: .26rem; margin: .25rem auto 0;}
.pop-bg .pop-box .pop-failed-bank-box {width: 4.5rem; background-color: #fff4e7; border: #ffe6c6 1px solid; border-radius: .1rem; padding: .3rem .2rem; margin: .3rem auto 0;}
.pop-bg .pop-box .pop-failed-bank-box p {color: #07367d; font-size: .28rem; line-height: .3rem; padding-left: 1.5rem; position: relative; margin-bottom: .2rem;}
.pop-bg .pop-box .pop-failed-bank-box p:last-child {margin-bottom: 0;}
.pop-bg .pop-box .pop-failed-bank-box p span {position: absolute; left: 0;}
.pop-bg .pop-box .pop-box-title {text-align: center; font-size: .36rem; color: #101841; line-height: .9rem; height: .9rem; border-bottom: #ddd 1px solid;}
.pop-bg .pop-box .game-into {width: 3.27rem; margin: .32rem auto .27rem;}
.pop-bg .pop-box .game-point {width: .98rem; position: absolute; left: 2.7rem; top: 4.3rem; -webkit-animation: pulse 2s linear infinite; animation: pulse 2s linear infinite;}
.pop-bg .pop-box .pop-box-content {text-align: center;}
.pop-bg .pop-box .pop-box-content p {color: #001f67; font-size: .32rem; line-height: .46rem; font-weight: bold;}
.pop-bg .pop-box .pop-box-content p span {color: #ef1b2c;}
.pop-bg .pop-box .pop-box-content p.red {color: #ef1b2c;}
.pop-bg .pop-box .pop-box-content.warning {margin: .75rem 0;}
.pop-bg .pop-box .share-btn {position: absolute; width: .8rem; right: .23rem; top: 0; margin-top: -.8rem;}
.pop-bg .pop-box .pop-btns-box {position: absolute; width: 5rem; display: -webkit-flex; display: flex; justify-content: space-between; left: 50%; margin-left: -2.5rem; bottom: -1rem;}
.pop-bg .pop-box .pop-btns-box > img {width: 2.3rem; height: .66rem;}
.pop-bg .pop-box button {width: 2.2rem; height: .7rem; line-height: .7rem; margin: .4rem auto; background-color: #ef1b2c; color: #fff; font-size: .28rem; text-align: center; border-radius: .7rem; font-weight: bold; border: none; -webkit-animation: pulse 2s linear infinite; animation: pulse 2s linear infinite;}
.pop-bg .pop-box button.warning {position: static; width: 2.2rem; margin: 0 auto .8rem;}
.pop-bg .rule-btn.pop {position: absolute; width: 1.35rem; top: .24rem; left: .3rem; display: none;}

.page {display: none;}

.page .lion-box .lion-text-box.follow {top: 4rem;}
.page .lion-box .follow-qr-box {position: absolute; width: 2.2rem; top: 6.4rem; left: 50%; text-align: center; margin-left: -1.1rem;}
.page .lion-box .follow-qr-box p {color: #fff; font-size: .28rem; margin-top: .16rem;}

.page .bottom {position: absolute; width: 100%; left: 0; bottom: 0;}
.page .lion-box {position: absolute; width: 100%; left: 0; top: 0; z-index: 9;}
.page .lion-box .lion-head {position: absolute; left: 0; top: 0;}
.page .lion-box .lion-mouth {position: absolute; width: 100%; height: 10.8rem; background-image: url("../images/lion_mouth.gif"); background-size: 100%; background-repeat: no-repeat; left: 0; top: -.1rem; -webkit-animation: mouthMove 2s 1s linear forwards; animation: mouthMove 2s 1s linear forwards;}
.page .lion-box .lion-tongue {position: absolute; width: 4.08rem; height: 47%; background-image: url("../images/lion_tongue.png"); background-size: 100%; background-repeat: no-repeat; left: 50%; margin-left: -2.04rem; top: 5.1rem; overflow: hidden; -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation: tongueMove 3s 2s linear forwards; animation: tongueMove 3s 2s linear forwards;}
.page .lion-box .lion-tongue .index-text-one {position: absolute; width: 2.12rem; left: 50%; margin-left: -1.06rem; top: 0rem; -webkit-animation: showToHide .5s 1.5s linear forwards; animation: showToHide .5s 3.2s linear forwards;}
.page .lion-box .lion-tongue .index-text-two {position: absolute; width: 1.12rem; left: 50%; margin-left: -.56rem; top: 0.7rem; opacity: 0; -webkit-animation: hideToShow .5s 1.5s linear forwards; animation: hideToShow .5s 3.2s linear forwards;}
.page .lion-box .lion-tongue .scroll {position: absolute; width: 3.34rem; left: 50%; margin-left: -1.67rem; bottom: 0;}
.page .lion-box .left-eye {position: absolute; width: 1.08rem; top: 1.45rem; left: .16rem; -webkit-animation: eyeLeftRound 2s linear infinite; animation: eyeLeftRound 2s linear infinite;}
.page .lion-box .right-eye {position: absolute; width: 1.08rem; top: 1.45rem; right: .16rem; -webkit-animation: eyeRightRound 2s linear infinite; animation: eyeRightRound 2s linear infinite;}
.page .lion-box .lion-text-box {position: absolute; top: 4rem; text-align: center; width: 100%; left: 0;}
.page .lion-box .lion-text-box p {color: #fff; font-size: .32rem; line-height: .36rem;}
.page .lion-box .rank-btn {position: absolute; width: 1.35rem; left: .2rem; top: 4.8rem;}
.page .lion-box .rule-btn {position: absolute; width: 1.35rem; right: .2rem; top: 4.8rem;}
.page .lion-box button.index {position: absolute; width: 2.2rem; height: .7rem; line-height: .7rem; text-align: center; background-color: #f3dcbe; border-radius: .7rem; color: #440720; font-size: .3rem; border: none; top: 4.6rem; left: 50%; margin-left: -1.1rem; -webkit-animation: pulse 2s linear infinite; animation: pulse 2s linear infinite;}


.page .level-box {position: absolute; width: .68rem; top: 0; left: .11rem;}
.page .game-info {position: absolute; width: 100%; left: 0; bottom: 1.2rem; text-align: center; color: #fff; font-size: .24rem;}
.page .box {position: relative; z-index: 9;}
.page .box .box-item {position: absolute; width: 2rem; height: 3rem; box-shadow: 0 .1rem .18rem rgba(43,12,9,.5); border-radius: .2rem; overflow: hidden;}
.page .box .box-item.toBig {-webkit-animation: pulse1 2s linear infinite; animation: pulse1 2s linear infinite;}
.page .box .box-item.hongkang {top: 0; left: 1.66rem;}
.page .box .box-item.tongluowan {top: 0; left: 3.85rem;}
.page .box .box-item.jianshazui {top: 2rem; left: 5.3rem;}
.page .box .box-item.guangzhou {top: 5.2rem; left: 5rem;}
.page .box .box-item.zhongshan {top: 6.4rem; left: 2.76rem; z-index: 9;}
.page .box .box-item.guantang {top: 5.2rem; left: .5rem;}
.page .box .box-item.shenzhen {top: 2rem; left: .2rem;}
.page .box .box-item > div {width: 2rem; height: 3rem;}
.page .box .box-item.an {-webkit-animation: turnOver .5s linear forwards; animation: turnOver .5s linear forwards;}
.page .box .box-item .item-back {background-image: url("../images/bank_card_back.png"); background-size: 100%; background-repeat: no-repeat; display: none;}
.page .box .box-item.hongkang .item-front {background-image: url("../images/bank_card_hongkong.png"); background-size: 100%; background-repeat: no-repeat;}
.page .box .box-item.tongluowan .item-front {background-image: url("../images/bank_card_tongluowan.png"); background-size: 100%; background-repeat: no-repeat;}
.page .box .box-item.jianshazui .item-front {background-image: url("../images/bank_card_jianshazui.png"); background-size: 100%; background-repeat: no-repeat;}
.page .box .box-item.guangzhou .item-front {background-image: url("../images/bank_card_guangzhou.png"); background-size: 100%; background-repeat: no-repeat;}
.page .box .box-item.zhongshan .item-front {background-image: url("../images/bank_card_zhongshan.png"); background-size: 100%; background-repeat: no-repeat;}
.page .box .box-item.guantang .item-front {background-image: url("../images/bank_card_guantang.png"); background-size: 100%; background-repeat: no-repeat;}
.page .box .box-item.shenzhen .item-front {background-image: url("../images/bank_card_shenzhen.png"); background-size: 100%; background-repeat: no-repeat;}
.page .box .box-item .item-front.show {display: -webkit-flex; display: flex;}
.page .box .box-item .item-front p {color: #fff; font-size: .5rem; font-weight: bold; width: .5rem;}
.page .start-text-box {position: absolute; width: 100%; text-align: center; color: #fff; top: 3rem; font-weight: bold;}
.page .start-text-box h1 {font-size: .47rem; margin-bottom: .22rem;}
.page .start-text-box p {font-size: .32rem;}
.page .start-text-box .start-time-box {width: 1.32rem; height: 1.32rem; line-height: 1.32rem; background-color: #f01b2d; border-radius: 50%; font-size: 1rem; margin: .15rem auto 0;}
.page .choose-answer-box {position: absolute; width: 100%; text-align: center; color: #fff; top: 3.4rem; font-weight: bold; display: none;}
.page .choose-answer-box .choose-time-box {width: 1.3rem; height: 1.3rem; background-color: #f01b2d; border-radius: 50%; overflow: hidden; margin: 0 auto .32rem;}
.page .choose-answer-box .choose-time-box > div {line-height: .78rem; font-size: .6rem; border-bottom: #7f1e22 1px solid;}
.page .choose-answer-box .choose-time-box > p {line-height: .5rem; font-size: .22rem; color: #ffe6c9;}
.page .choose-answer-box > h1 {font-size: .3rem; margin: .18rem 0;}
.page .choose-answer-box > p {font-size: .28rem; line-height: .38rem;}

.page.rule,.page.rank {position: absolute; width: 100%; height: 100vh; left: 0; top: 0; z-index: 9999; background-image: url("../images/bg.jpg"); background-size: 100%;}
.page .bottom-cloud {position: absolute; left: 0; bottom: 0;}
.page .title {position: absolute; left: 0; top: .27rem;}
.page .content-box {background-color: #fff; width: 6.68rem; padding: .25rem .18rem .4rem; border-radius: .1rem; position: absolute; left: .41rem; top: 1.4rem; z-index: 9;}
.page .content-box.rank {padding: 0; background-color: transparent;}
.page .content-box > div {max-height: 75vh; overflow: auto;}
.page .content-box > div > p {font-size: .28rem; line-height: .35rem; position: relative; padding-left: .4rem; margin-bottom: .2rem;}
.page .content-box > div > p > span {position: absolute; left: 0;}
.page .content-box button {width: 1.93rem; line-height: .56rem; border-radius: .56rem; background-color: #ef1b2c; color: #fff; font-size: .24rem; text-align: center; border: none; margin: 0 auto -.7rem; position: relative; z-index: 2;}
.page .content-box .list-choose-box {display: -webkit-flex; display: flex;}
.page .content-box .list-choose-box .list-choose-item {width: 50%; border-radius: .1rem .1rem 0 0; text-align: center; color: #fff; height: .7rem; line-height: .7rem; font-size: .28rem; background-color: #c5baaf;}
.page .content-box .list-choose-box .list-choose-item.onthis {color: #001f67; background-color: #fff;}
.page .content-box .rank-list-box {background-color: #fff; padding: 0 .13rem; border-radius: 0 0 .1rem .1rem;}
.page .content-box .rank-list-box .rank-list-cont {height: 50vh; overflow: auto;}
.page .content-box .rank-list-box .rank-list-item {display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; padding: .2rem 0; border-bottom: #f1d52e 1px solid;}
.page .content-box .rank-list-box .rank-list-item.my {background-color: #fff0be; border: #d7a30f 2px solid; border-radius: .1rem; margin-top: .18rem;}
.page .content-box .rank-list-box .rank-list-item .rank-list-num {width: .46rem; color: #001f67; font-size: .28rem; text-align: center;}
.page .content-box .rank-list-box .rank-list-item .rank-list-user {width: .8rem; height: .8rem; border-radius: 50%; overflow: hidden; margin: 0 .2rem;}
.page .content-box .rank-list-box .rank-list-item .rank-list-name {line-height: .32rem;}
.page .content-box .rank-list-box .rank-list-item .rank-list-name h1 {font-size: .28rem; color: #5c5c5c;}
.page .content-box .rank-list-box .rank-list-item .rank-list-name p {font-size: .26rem; color: #8391a3; padding-left: 0; margin-bottom: 0;}
.page .content-box .rank-list-box .rank-list-item .rank-list-time {flex: 1; text-align: right; font-size: .28rem; line-height: .32rem; padding-right: .2rem;}
.page .content-box .rank-list-box .rank-list-item .rank-list-time span {color: #da5e5e;}
.page .content-box .rank-tips-box {font-size: .26rem; color: #999999; line-height: .3rem; text-align: center; margin: .4rem 0 .6rem;}
.page .content-box button.rank {margin: -.3rem auto 0;}




@-webkit-keyframes turnOver {
    from {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }

    50% {
        -webkit-transform: rotateY(90deg);
        transform: rotateY(90deg);
    }

    to {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

@keyframes turnOver {
    from {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }

    50% {
        -webkit-transform: rotateY(90deg);
        transform: rotateY(90deg);
    }

    to {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

@-webkit-keyframes eyeLeftRound {
    from {
        -webkit-transform: translate(0%,0%);
        transform: translate(0%,0%);
    }

    25% {
        -webkit-transform: translate(-10%,-10%);
        transform: translate(-10%,-10%);
    }

    50% {
        -webkit-transform: translate(-20%,0%);
        transform: translate(-20%,0%);
    }

    75% {
        -webkit-transform: translate(-10%,10%);
        transform: translate(-10%,10%);
    }

    to {
        -webkit-transform: translate(0%,0%);
        transform: translate(0%,0%);
    }
}

@keyframes eyeLeftRound {
    from {
        -webkit-transform: translate(0%,0%);
        transform: translate(0%,0%);
    }

    25% {
        -webkit-transform: translate(-10%,-10%);
        transform: translate(-10%,-10%);
    }

    50% {
        -webkit-transform: translate(-20%,0%);
        transform: translate(-20%,0%);
    }

    75% {
        -webkit-transform: translate(-10%,10%);
        transform: translate(-10%,10%);
    }

    to {
        -webkit-transform: translate(0%,0%);
        transform: translate(0%,0%);
    }
}

@-webkit-keyframes eyeRightRound {
    from {
        -webkit-transform: translate(0%,0%);
        transform: translate(0%,0%);
    }

    25% {
        -webkit-transform: translate(10%,-10%);
        transform: translate(10%,-10%);
    }

    50% {
        -webkit-transform: translate(20%,0%);
        transform: translate(20%,0%);
    }

    75% {
        -webkit-transform: translate(10%,10%);
        transform: translate(10%,10%);
    }

    to {
        -webkit-transform: translate(0%,0%);
        transform: translate(0%,0%);
    }
}

@keyframes eyeRightRound {
    from {
        -webkit-transform: translate(0%,0%);
        transform: translate(0%,0%);
    }

    25% {
        -webkit-transform: translate(10%,-10%);
        transform: translate(10%,-10%);
    }

    50% {
        -webkit-transform: translate(20%,0%);
        transform: translate(20%,0%);
    }

    75% {
        -webkit-transform: translate(10%,10%);
        transform: translate(10%,10%);
    }

    to {
        -webkit-transform: translate(0%,0%);
        transform: translate(0%,0%);
    }
}

@-webkit-keyframes mouthMove {
    from {
        bottom: .4rem;
    }

    10%,90% {
        bottom: -.1rem;
    }

    to {
        bottom: .4rem;
    }
}

@keyframes mouthMove {
    from {
        bottom: .4rem;
    }

    10%,90% {
        bottom: -.1rem;
    }

    to {
        bottom: .4rem;
    }
}

@-webkit-keyframes tongueMove {
    from {
        height: 47%;
    }

    50% {
        height: 7%;
    }

    to {
        height: 47%;
    }
}

@keyframes tongueMove {
    from {
        height: 47%;
    }

    50% {
        height: 7%;
    }

    to {
        height: 47%;
    }
}

@-webkit-keyframes showToHide {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes showToHide {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-webkit-keyframes hideToShow {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes hideToShow {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes toBig {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    to {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }
}

@keyframes toBig {
    from {
        -webkit-transform: scale(1);
    }

    to {
        -webkit-transform: scale(1.5);
    }
}

@-webkit-keyframes backSmall {
    from {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes backSmall {
    from {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.2, 1.2, 1.2);
        transform: scale3d(1.2, 1.2, 1.2);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.2, 1.2, 1.2);
        transform: scale3d(1.2, 1.2, 1.2);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@-webkit-keyframes pulse1 {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.5, 1.5, 1.5);
        transform: scale3d(1.5, 1.5, 1.5);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes pulse1 {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.5, 1.5, 1.5);
        transform: scale3d(1.5, 1.5, 1.5);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}


